<!DOCTYPE html>
<html lang="zh">
<head>
    <title>首页 - {$Think.config.site.SITE_NAME}</title>
    {include file="common/meta" /}
</head>
<body>

<!-- Navbar -->
{include file="common/header" /}
<!-- /Navbar -->
<!-- Main Container -->
<div class="main-container container-fluid">
    <!-- Page Container -->
    <div class="page-container">

        <!-- Page Sidebar -->
        {include file="common/sidebar" /}
        <!-- /Page Sidebar -->
        <!-- Page Content -->
        <div class="page-content">
            <!-- Page Breadcrumb -->
            <div class="page-breadcrumbs">
                <ul class="breadcrumb">
                    <li class="active">
                        <i class="fa fa-home"></i>&nbsp;控制面板
                    </li>
                    <li>
                        <i class="fa fa-users"></i> 个人资料
                    </li>
                </ul>
            </div>
            <!-- /Page Breadcrumb -->
            <!-- Page Body -->
            <div class="page-body">
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-xs-12">
                        <div class="widget flat radius-bordered">
                            <div class="widget-header bg-themeprimary">
                                <span class="widget-caption">个人资料</span>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <form action="" class="form-horizontal" enctype="multipart/form-data">
                                        <input type="hidden" name="id" value="{$admin_info.id}">
                                        <div class="form-group">
                                            <label for="avatar"
                                                   class="col-sm-4 control-label no-padding-right"></label>
                                            <div class="col-sm-6">
                                                <img src="{$admin_info.avatar|default='/static/admin/img/logo.png'}" alt="选择并上传头像" id="avatar_img"
                                                     style="width: 140px;height: 140px;left:0;top: 0;border-radius: 50%;"/>
                                                {if condition="check_auth('Admin/uploadAvatar')"}
                                                <input type="file" id="avatar" name="avatar"
                                                       accept="image/jpg,image/png,image/gif"
                                                       style="width: 100%;height:100%;opacity: 0;position: absolute;left:0;top: 0;"
                                                        onchange="uploadImg(this)"
                                                />
                                                {/if}
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="username"
                                                   class="col-sm-2 control-label no-padding-right">用户名</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="username" id="username"
                                                       class="form-control" value="{$admin_info.username}" disabled>
                                            </div>
                                            <p><span style="color: red;">*</span>用户名不可更改</p>
                                        </div>
                                        <div class="form-group">
                                            <label for="nickname"
                                                   class="col-sm-2 control-label no-padding-right">昵称</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="nickname" id="nickname"
                                                       class="form-control" value="{$admin_info.nickname}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="email"
                                                   class="col-sm-2 control-label no-padding-right">邮箱</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="email" id="email"
                                                       class="form-control" value="{$admin_info.email}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="mobile"
                                                   class="col-sm-2 control-label no-padding-right">手机号</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="mobile" id="mobile"
                                                       class="form-control" value="{$admin_info.mobile}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="password"
                                                   class="col-sm-2 control-label no-padding-right">密码</label>
                                            <div class="col-sm-6">
                                                <input type="password" name="password" id="password"
                                                       class="form-control" placeholder="不填时不修改密码">
                                            </div>
                                        </div>
                                        {if condition="check_auth('Admin/setProfile')"}
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="button" id="editProfile"
                                                        class="btn btn-primary">确定
                                                </button>
                                            </div>
                                        </div>
                                        {/if}
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Page Body -->
        </div>
        <!-- /Page Content -->

    </div>
    <!-- /Page Container -->
    <!-- Main Container -->

</div>

{include file="common/script" /}
<script>
    // 头像预览
    $("#avatar").change(function () {
        // 获取上传文件对象
        var file = $(this)[0].files[0];
        // 读取文件URL
        var reader = new FileReader();
        reader.readAsDataURL(file);
        // 阅读文件完成后触发的事件
        reader.onload = function () {
            // 读取的URL结果：this.result
            $("#avatar_img").attr("src", this.result);
        }
    });

    function uploadImg(obj) {
        if (obj.value === "") {
            return false;
        }
        let formData = new FormData();
        formData.append("avatar", $(obj)[0].files[0]);
        $.ajax({
            type: "POST",
            url: "/admin/Admin/uploadAvatar",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (data) {
                // 接收返回的图片地址
                if (data.code === 1) {
                    toastr.success("上传头像", data.msg);
                    // 设置图片路径为最新的路径
                    $("#avatar_img").attr("src", data.data.path);
                    setTimeout(function () {
                        location.href = "/admin/Admin/profile";
                    }, 1000);
                } else {
                    toastr.error(data.msg);
                }
            }
        });
        return false;
    }

    $(function () {
        $('#editProfile').click(function () {
            let url = "/admin/Admin/setProfile";
            $.ajax({
                url: url,
                data: $('form').serialize(),
                dataType: 'json',
                type: "POST",
                success: function (data) {
                    if (data.code === 1) {
                        toastr.success("设置个人信息", data.msg);
                        setTimeout(function () {
                            location.href = "/admin/Admin/profile";
                        }, 1000);
                    } else {
                        toastr.error(data.msg);
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
<!--  /Body -->
</html>
